<template>
	<div class="goodinfo">
		<div class="mui-card">
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<lunbo :getLunBoMsg="lunbolist" :isfull="false"></lunbo>
				</div>
			</div>
		</div>
		<transition @before-enter="beforEnter"@enter="Enter" @after-enter="afterEnter">
				<div class="ball" v-show="ballFlag"  ref="ball"></div>
			</transition>
		<div class="mui-card">
			<div class="mui-card-header">{{InfoList.title}}</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p>
						市场价：<del>￥{{InfoList.market_price}}</del>&nbsp;&nbsp;销售价：<span class="new_price">￥{{InfoList.sell_price}}</span>
					</p>
					<p>
						购买数量：
						<numbox @sendballnum="getbagetnum"  v-bind:max="InfoList.stock_quantity"></numbox>
					</p>
					<p>
						<mt-button type="primary" size="small">立即购买</mt-button>
						<mt-button type="danger" size="small" style="left: 150px;" @click="ballFlag=!ballFlag">加入购物车</mt-button>
					</p>
				</div>
			</div>

		</div>
		<div class="mui-card">
			<div class="mui-card-header">商品参数</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p>商品货号：{{InfoList.goods_no}}</p>
					<p>库存情况：{{InfoList.stock_quantity}}件</p>
					<p>上架时间：{{InfoList.add_time | dateFormat}}</p>
				</div>
			</div>
			<div class="mui-card-footer">
				<mt-button type="primary" size="large" class="is-plain" @click="godesc(id)">图文介绍</mt-button>
				<mt-button type="danger" size="large" class="is-plain" @click="gocomment(id)">商品评论</mt-button>
			</div>
		</div>
	</div>
</template>

<script>
	import lunbo from '../subcomment/Lunbo.vue'
	import numbox from '../subcomment/num-box.vue' //导入数字选择框组件
	export default {
		data() {
			return {
				InfoList: "",
				id: this.$route.params.id,
				lunbolist: [],
				ballFlag:false,
				num:[]

			}
		},
		created() {
			this.getlunbolist();
			this.getgoodsinfolist();
		},
		methods: {
			getlunbolist() {

				this.$http.get("api/getthumimages/" + this.id).then(data => {

					if(data.body.status === 0) {

						const json = JSON.parse(JSON.stringify(data.body.message).replace(/src/g, "img"));

						this.lunbolist = json;

					}
				})
			},
			getgoodsinfolist() {

				this.$http.get("api/goods/getinfo/" + this.id).then(data => {

					if(JSON.parse(data.bodyText).status === 0) {

						this.InfoList = JSON.parse(data.bodyText).message[0];

					}
				})
			},
			godesc(id) { //点击使用编程式导航，进入图文页面
				//				this.$router.push({name:"goodsDesc",params:{id}});
				this.$router.push("/index/godesc/" + id);
			},
			gocomment(id) { //点击使用编程式导航，进入图文页面
				this.$router.push({
					name: "goodsComment",
					params: {
						id
					}
				});
			},
			beforEnter(el){
				
				el.style.transform="translate(0,0)";
			},
			Enter(el,down){
				//获取小球在页面中的位置
				var ball=this.$refs.ball.getBoundingClientRect();
				var nadge=document.getElementById('badge').getBoundingClientRect();
				var   x=nadge.left-ball.left;
				var   y=nadge.top-ball.top;
				el.offsetWidth;
				el.style.transform=`translate(${x}px,${y}px)`;
				el.style.transition="all  0.5s cubic-bezier(.4,-0.3,1,.68)";
				down();
			},
			afterEnter(el){
				this.ballFlag=!this.ballFlag
			},
			//父组件把小球数量传递给子组件
			getbagetnum(num){
				this.num=num;
				console.log(this.num)
			}

		},
		components: {
			lunbo,
			numbox
		}

	}
</script>

<style scoped="scoped" lang="less">
	.goodinfo {
		background: #eee;
		overflow: hidden;
	}
	
	.new_price {
		font-size: 15px;
		color: red;
		font-weight: bold;
	}
	
	.mui-card-footer {
		display: block;
		button {
			margin: 10px 0;
		}
	}
	.ball{
		width: 15px;
		height: 15px;
		background: red;
		position: absolute;
		border-radius: 50%;
		z-index:99;
		top:433px;
		left:152px;
		}
</style>